<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>axios cancel token | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="axios  cancel  request 单个请求 通过CancelToken.source工厂函数创建 cancel token123456789101112131415161718192021const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get(&apos;/user/12345&apos;, &amp;">
<meta name="keywords" content="Vue">
<meta property="og:type" content="article">
<meta property="og:title" content="axios cancel token">
<meta property="og:url" content="https://storm4542.github.io/archives/14284da1.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="axios  cancel  request 单个请求 通过CancelToken.source工厂函数创建 cancel token123456789101112131415161718192021const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get(&apos;/user/12345&apos;, &amp;">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2019-06-04T03:25:38.980Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="axios cancel token">
<meta name="twitter:description" content="axios  cancel  request 单个请求 通过CancelToken.source工厂函数创建 cancel token123456789101112131415161718192021const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get(&apos;/user/12345&apos;, &amp;">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-axios-cancel-token" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      axios cancel token
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2019-06-04T03:25:17.000Z" itemprop="datePublished">2019-06-04</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="axios-cancel-request"><a href="#axios-cancel-request" class="headerlink" title="axios  cancel  request"></a>axios  cancel  request</h1><p><a name="JiqDO"></a></p>
<h3 id="单个请求"><a href="#单个请求" class="headerlink" title="单个请求"></a>单个请求</h3><p><a name="32Bvr"></a></p>
<h4 id="通过CancelToken-source工厂函数创建-cancel-token"><a href="#通过CancelToken-source工厂函数创建-cancel-token" class="headerlink" title="通过CancelToken.source工厂函数创建 cancel token"></a>通过CancelToken.source工厂函数创建 cancel token</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> CancelToken = axios.CancelToken;</span><br><span class="line"><span class="keyword">const</span> source = CancelToken.source();</span><br><span class="line"></span><br><span class="line">axios.get(<span class="string">'/user/12345'</span>, &#123;</span><br><span class="line">  cancelToken: source.token</span><br><span class="line">&#125;).catch(<span class="function"><span class="keyword">function</span> (<span class="params">thrown</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (axios.isCancel(thrown)) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'Request canceled'</span>, thrown.message);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="comment">// handle error</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">axios.post(<span class="string">'/user/12345'</span>, &#123;</span><br><span class="line">  name: <span class="string">'new name'</span></span><br><span class="line">&#125;, &#123;</span><br><span class="line">  cancelToken: source.token</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// cancel the request (the message parameter is optional)</span></span><br><span class="line">source.cancel(<span class="string">'Operation canceled by the user.'</span>);</span><br></pre></td></tr></table></figure>
<p><a name="xP9V9"></a></p>
<h4 id="通过执行函数创建-cancel-token"><a href="#通过执行函数创建-cancel-token" class="headerlink" title="通过执行函数创建 cancel token"></a>通过执行函数创建 cancel token</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> CancelToken = axios.CancelToken;</span><br><span class="line"><span class="keyword">let</span> cancel;</span><br><span class="line"></span><br><span class="line">axios.get(<span class="string">'/user/12345'</span>, &#123;</span><br><span class="line">  cancelToken: <span class="keyword">new</span> CancelToken(<span class="function"><span class="keyword">function</span> <span class="title">executor</span>(<span class="params">c</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// An executor function receives a cancel function as a parameter</span></span><br><span class="line">    cancel = c;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// cancel the request</span></span><br><span class="line">cancel();</span><br></pre></td></tr></table></figure>
<p><a name="Lop4g"></a></p>
<h3 id="在路由切换时-cancel-request"><a href="#在路由切换时-cancel-request" class="headerlink" title="在路由切换时 cancel request"></a>在路由切换时 cancel request</h3><p><a name="50xCr"></a></p>
<h4 id="配置全局变量-source"><a href="#配置全局变量-source" class="headerlink" title="配置全局变量 source"></a>配置全局变量 source</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">Vue.prototype.store = &#123;</span><br><span class="line">       source: &#123;</span><br><span class="line">           token: <span class="literal">null</span>,</span><br><span class="line">           cancel: <span class="literal">null</span></span><br><span class="line">       &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><a name="wPxV8"></a></p>
<h4 id="配置-router"><a href="#配置-router" class="headerlink" title="配置 router"></a>配置 router</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//router.js</span></span><br><span class="line"></span><br><span class="line">router.beforeEach(<span class="function">(<span class="params">to, <span class="keyword">from</span>, next</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(Vue.prototype.store.source);</span><br><span class="line">    <span class="keyword">const</span> CancelToken = axios.CancelToken;</span><br><span class="line">    Vue.prototype.store.source.cancel &amp;&amp; Vue.prototype.store.source.cancel();</span><br><span class="line">    Vue.prototype.store.source = CancelToken.source();</span><br><span class="line">    next();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p><a name="okTyF"></a></p>
<h4 id="配置-axios"><a href="#配置-axios" class="headerlink" title="配置 axios"></a>配置 axios</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> http = axios.create()</span><br><span class="line">http.interceptors.request.use(<span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    config.cancelToken = store.source.token</span><br><span class="line">    <span class="keyword">return</span> config</span><br><span class="line">&#125;, err =&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(err)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
  
    <a href="be65f012.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">Map &amp;&amp; Set</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/14284da1.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
